<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Outliner Mode</title>
    <link rel="stylesheet" type="text/css" href="styles/outliner.css" media="screen" />
     <link rel="stylesheet" type="text/css" href="styles/meeting.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="styles/jquery-ui-1.8.1.custom.css" media="screen" />
    <style type="text/css">@import "styles/jquery.countdown.css";</style>
    <script type="text/javascript" src="scripts/jquery-1.4.2.min.js" ></script>
    <script type="text/javascript" src="scripts/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.layout.min-1.2.0.js"></script>
    <script type="text/javascript" src="scripts/shortcuts.js"></script>
    <script type="text/javascript" src="scripts/jquery.qtip-1.0.0-rc3.min.js"></script>
    <script type="text/javascript" src="scripts/couch.js"></script>
    <script type="text/javascript" src="scripts/jquery.couch.js"></script>
    <script type="text/javascript" src="scripts/jquery.parsequery.js"></script>
    <script type="text/javascript" src="scripts/wikid-0.2.js" ></script>
    <script type="text/javascript" src="scripts/date.js" ></script>
    <script type="text/javascript" src="scripts/meeting.js" ></script>
    <script type="text/javascript" src="scripts/jquery.countdown.js" ></script>
    <script type="text/javascript" src="scripts/grayscale.js" ></script>
    <script type="text/javascript">

        $(function() {

            var db_name = wikid.parseDBname(window.location);
            var db = new CouchDB(db_name);
            var wikid_id = wikid.parseTopicName(window.location);
            var doc = db.open(wikid_id);
            var readableId = wikid.titleFromTopicId(wikid_id);
            if (!doc) {
                window.location = "startMeeting.html";
                return;
            }
            $('.readableId').text(readableId);
            
            
            var result = meeting.toMeeting(doc, db);
            $('#dateTime').text(result.readableStartDate);
            $('#duration').countdown({
                since: result.startDate,
                compact: true,
                format: 'HMS',
                description: ''
            });



            //auto save on close
            var saved = false;
            $(window).bind('unload', function() {
                //if(!confirm("Please save page")) {
                //    return false;
                //}
            });

            // set the layout manager
            $('body').layout({
                applyDefaultStyles: true,
                enableCursorHotkey: false
            });

            /**
             * Agenda 
             */
            var selectedAgendaLasBGColor;
            $("#agenda span.agendaItem").hover(
                function() {
                    selectedAgendaLasBGColor = $(this).css('background-color');
                    $(this).css('background-color', 'green');
                    var uuid = $(this).attr('id');
                    $('.' + uuid).css('background-color', 'green');

                }, function() {
                    $(this).css('background-color', selectedAgendaLasBGColor);
                    var uuid = $(this).attr('id');
                    $('.' + uuid).css('background-color', 'white');
                }
            ).click(function() {
                 $('.currentAgenda').removeClass("currentAgenda");
                 appendNote($(this).text(), false);
                 selectedAgendaLasBGColor = 'yellow';
                 $(this).addClass("currentAgenda");
            });

            /**************************************************************
             Indent buttons
             **************************************************************/



            /*********************************************************************
             * Bind attendee buttons
             */


            $(".attendee").each(function(i, item){
                var index = i + 1;
                var keycombo = 'alt+' + index;
                 shortcut.add(keycombo, function() {
                    attendeeTalking($('.attendee-' + index));
                });
            }).click(function(){attendeeTalking($(this))});


            /**
             * Record Button
             */
            $('#recordButton').button().click(function(){
               if($(this).attr('checked') ) {
                    $.getJSON('http://localhost:5987/json/record/start?callback=?', {'id' : '1234'}, recordingStatusChanged);
               } else {
                   $.getJSON('http://localhost:5987/json/record/stop?callback=?', {}, recordingStatusChanged);
               }
            });


          

        });

        function recordingStatusChanged(data, status) {
            //console.log('post returend ');
            //console.dir(data);
        }

        function attendeeTalking(attendeeDiv){
            var topic_id = attendeeDiv.attr('title');
            var name = attendeeDiv.find('p').text();
            var when = new Date();
            var current = $('.current');
            var parent = current.parent();
            var newNote = $('<li><span class="talk">' + name + ' is talking.</span></li>');
            $('.current').replaceWith(newNote);
            //newNote.fadeIn(1500);
            newNote.effect("highlight", {}, 3000);
            parent.append(current);
            $("#entry").focus();
            var item = newNote.children('.talk');
            item.data('info', {date: when, who: topic_id});
            item.qtip({
                content: {
                    text: item.data('info').date + 'daddas'
                },
                style: {
                    name: 'cream',
                    tip: true,
                    border: {
                        width:5,
                        radius: 10
                    }
                },
                 position: {
                      corner: {
                         target: 'topLeft',
                         tooltip: 'bottomLeft'
                      }
                   }
            });



            



        }


        function highlightAttendee(number) {
            $('.attendee-' + number).effect("highlight", {}, 500);
        }

        function lessIndentCurrent() {
            var current = $('.current');
            var oneUpUL = current.parent().parent();
            current.appendTo(oneUpUL);
            $("#entry").focus();
        }
        function moreIndentCurrent() {
            var current = $('.current');
            var prev = current.prev();
            var ul;
            if (prev.children('ul').size() > 0 && prev.children('ul').children('li').size() > 0) {
                ul = prev.children('ul');
            } else {
                var ul = $('<ul></ul>');
                prev.append(ul);
            }
            current.appendTo(ul);
            $("#entry").focus();
        }
        function appendNote(note, clearEntry) {
            var when = new Date();
            var current = $('.current');
            var parent = current.parent();
            var newNote = $('<li><span class="item">' + note + '</span></li>');
            $('.current').replaceWith(newNote);
            //newNote.fadeIn(1500);
            newNote.effect("highlight", {}, 3000);
            parent.append(current);
            $("#entry").focus();
            var item = newNote.children('.item');
            item.data('info', {date: when});
            item.qtip({
                content: {
                    text: item.data('info').date + 'daddas'
                },
                style: {
                    name: 'cream',
                    tip: true,
                    border: {
                        width:5,
                        radius: 10
                    }
                },
                 position: {
                      corner: {
                         target: 'topLeft',
                         tooltip: 'bottomLeft'
                      }
                   }
            });
        }

        function getCurrentLevel() {
            var current = $('.current');
            var level = 0;
            var found = false;
            var parent =  current.parent();
            while (!found) {

                if (parent.hasClass('root')) return level;
                else {
                    level++;
                    parent = parent.parent().parent();
                    //console.dir(parent);
                }
                if (level > 20 ) return "not found";
            }
        }

    </script>

</head>
<body>
    <div class="ui-layout-north">


        <div id="recordDiv">
            <input type="checkbox" id="recordButton" /><label for="recordButton">Record</label>
        </div>
        <div id="subInfo">

            <div id="duration">00:23:01</div>
            <div id="dateTime">12 August 2010, 10:02am</div>
        </div>
        <div id="mainTopic" class="readableId">Meeting With Randy</div>
    </div>
    <div id="agenda" class="ui-layout-west">
        <div class="ui-widget-header">Agenda</div>
        <div class="ui-widget-context">
            <ul>
               <li ><span id="uuid-123" class="agendaItem">Review <span class="topic">Action Items</span></span>
                   <ul>
                       <li><span id="uuid-124" class="agendaItem">Bob to get stuff</span></li>
                       <li><span id="uuid-125" class="agendaItem">Steve to get stuff</span></li>
                   </ul>
                </li>
                <li><span id="uuid-126" class="agendaItem currentAgenda">Review <span class="topic">Corporate Structure</span></span></li>
                <li><span id="uuid-127" class="agendaItem">Finalize <span class="topic">Investor List</span></span></li>
            </ul>
        </div>
        <div class="ui-widget-header">Types</div>
        <div class="ui-widget-context">
            <div class="attendee" title="Actionable">
                <img src="images/actionable/korganizer_todo.64.png" alt="An action that needs to be done after the meeting." title="An action that needs to be done after the meeting."/>
                <p>Action</p>
            </div>
            <div class="attendee" title="Question">
                <img src="images/question/filetypes.64.png" alt="A question that needs to be answered after the meeting" title="A question that needs to be answered after the meeting"/>
                <p>Question</p>
            </div>
            <div class="attendee" title="FutureItem">
                <img src="images/future-idea/ktip.64.png" alt="A future item/Idea" title="A future item/Idea"/>
                <p>Future Item/Idea</p>
            </div>
        </div>
    </div>
    <div class="ui-layout-east">
        <div class="ui-widget-header">Attendees</div>
        <div id="attendees">

            <div class="attendee attendee-1" title="Ryan_Ramage">
                <img src="images/ryan.jpg" alt="Ryan Ramage" title="Ryan Ramage"/>
                <p>Ryan Ramage</p>
            </div>
            <div class="attendee attendee-2" title="Richard_Bayly">
                <img src="images/rich.jpg" alt="Richard Bayly" title="Richard Bayly"/>
                <p>Richard Bayly</p>
            </div>
            <div class="attendee attendee-3" title="Randy_Simpson">
                <img src="images/anon.jpg" alt="Randy Simpson" title="Randy Simpson"/>
                <p>Randy Simpson</p>
            </div>


        </div>
    </div>
    <div class="ui-layout-center">


        <div class="topicBox topicBox1">
            <h2>Gardening</h2>
            <p>Front Yard is a mess</p>
            <p>We need to mow.</p>

            <div class="topicBox topicBox2 actionable">
                <img class="topicIcon" src="images/actionable/grey.korganizer_todo.32.png" alt="Action Item" title="Action Item">
                <div class="actionableToolbar">
                    <img class="blur" src="images/calendar/light.grey.kalarm.16.png" alt="Set Due Date" title="Set Due Date" />
                    <img class="blur"  src="images/context/light.grey.message.16.png" alt="Set Context" title="Set Context" />
                </div>
                <h2>Mow Yard</h2>
                <p>
                    <img src="images/ryan.jpg" alt="Click To Change Delegate" title="Click To Change Delegate" width="16" height="16"/> Ryan to do
                </p>

                <form id="currentForm">
                        <input type="text" id="entry" name="entry" />
                        <div class="indentHelper">
                            <img class="blur" src="images/actions/light.grey.1leftarrow.png" alt="Leave 'Mow Yard' return to 'Gardening'" title="Leave 'Mow Yard' return to 'Gardening'" />
                        </div>
                </form>

                <div class="createSubtopic createSubtopicParentHasIcon">
                    <img class="blur" src="images/actions/light.grey.list-add.png" alt="Add Subtopic to 'Mow Yard'" title="Add Subtopic to 'Mow Yard'"/>
                </div>
            </div>
            <div class="createSubtopic ">
                <img class="blur" src="images/actions/light.grey.list-add.png" alt="Add Subtopic to 'Gardening'" title="Add Subtopic to 'Gardening'"/>
            </div>
        </div>
        <div class="rootCreateSubtopic ">
            <img class="blur" src="images/actions/light.grey.list-add.png" alt="Start New Topic" title="Start New Topic"/>
        </div>
    </div>
</body>
</html>